import React, { Component } from 'react';
import actions from './store/actions/index'

function VoteContent(props) {
    let { supNum, oppNum } = props.store.getState().Vote
    console.log(supNum, oppNum)
    return (<>
        <p>支持:{supNum}</p>
        <p>反对:{oppNum}</p>
    </>)
}

function VoteButton(props) {
    let store = props.store;
    return (<>
        <button onClick={ev => { store.dispatch(actions.Vote.changeSupNum()) }}>能</button>
        <button onClick={ev => { store.dispatch(actions.Vote.changeOppNum()) }}>不能</button>
    </>)
}
class Vote extends Component {
    constructor(props) {
        super(props);
        // 把reducer容器中的公共状态赋值给自己的私有状态
        let { Vote: { supNum, oppNum } } = this.props.store.getState();
        this.state = {
            supNum,
            oppNum
        }
    }
    render() {
        let { supNum, oppNum } = this.state,
            store = this.props.store;
        return (
            <>
                <h3>今天能不能出去玩呢？<span>N:{supNum + oppNum}</span></h3>
                <VoteContent store={store} />
                <VoteButton store={store} />
            </>
        );
    }
    // 第一次渲染完，把redux状态改变后重新渲染组件的方法增加到事件池中
    componentDidMount() {
        this.props.store.subscribe(() => {
            this.setState({
                ...this.props.store.getState().Vote
            })
        })
    }
}

export default Vote;